<template>
    <div class="user-management-container">
        <!-- 用户表格 -->
        <el-table :data="data" border style="width: 100%; margin-top: 10px;">
            <el-table-column type="selection" width="55" />
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="logIp" label="IP" />
            <el-table-column prop="addr" label="地址" />
            <el-table-column prop="account" label="用户账号" />
            <el-table-column prop="createTime" label="登录日期">
                <template v-slot="scoped">
                    {{ scoped.row.createTime == null ? " " : moment(scoped.row.createTime).format("YYYY-MM-DD") }}
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="page.pageIndex" :page-sizes="[2, 4, 6, 8]" :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount">
            </el-pagination>
        </div>
    </div>


</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue';
import { APIs } from '../../Http/http'
import { useCounterStore } from '../../stores/counter'
import { EditPen, Delete, ZoomOut, Refresh } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment';
const store = useCounterStore();
const page = ref({
    pageIndex: 1,
    pageSize: 10,
    total: 0,
    totalCount: 0
})



const data = ref([{

}])

const GetRole = () => {
    APIs.get("/api/Read/LoginLogger", {
        params: {
            pageIndex: page.value.pageIndex,
            pageSize: page.value.pageSize,
            total: page.value.total,
            totalCount: page.value.totalCount,
        }
    }).then(res => {
        data.value = res.data.data.data;
        page.value.total = res.data.data.total;
        page.value.totalCount = res.data.data.totalCount;
    })
}













// 分页处理函数
const handleSizeChange = (val: number) => {
    page.value.pageSize = val;
    GetRole();
}

const handleCurrentChange = (val: number) => {
    page.value.pageIndex = val;

    GetRole();
}

onMounted(() => {
    GetRole();
})

</script>
